import React from 'react';
import $ from 'jquery';
import CommentBox from './CommentBox.js';

const Details = ({data}) => {
	return(
		<div>
		<h3>{data.title}</h3>
		<span>发表时间<strong>{data.time}</strong></span>
		<p>{data.text}</p>
		</div>
	)
}

class Detile extends React.Component {
	constructor (props){
		super(props)
		this.state = {
			data: {
				title: '',
				time: '',
				text: '',
				showDetail: false
			}
		}
	}

	loadArticleFromServer () {
		$.ajax({
			url: '/blog/'+this.props.params.id,
			type: 'GET',
			dataType: 'json',
			success: (data) => {
				if(data && data.length){
					let detailInfo = data[0]
					detailInfo["showDetail"] = true
					this.setState({
						data: detailInfo
					})
				}else{
					console.log("sorry get data empty")
				}
			}
		})
	}
	componentDidMount() {
		this.loadArticleFromServer();
	}
	render() {
		const detail = this.state.data
		return <div className="detile">
			<div className="articleDetile">
				{
           detail.showDetail && <Details data={detail} />
				}
			</div>
			<CommentBox id={this.props.params.id}/>
		</div>;
	}
}
module.exports = Detile;